<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插槽</title>
    <style type="text/css">
        header { margin: 15px 0; border-bottom: 1px solid #dfdfdf;}
        #root { border: 2px solid blue ;}
        .counter { margin: 15px ; border: 2px solid gray ; min-height: 10px; }
    </style>
</head>
<body>

    <header>
        <a href="index.html">返回首页</a>
    </header>

    <h3>具名插槽( Named Slot)</h3>

    <div id="root">
        <kaifamiao-counter>
            <!-- 通过 template 的 v-slot 来指定插槽名称 -->
            <template v-slot:decrease>
                <button @click="handler('-')">减少</button>
            </template>
            <!-- v-slot: 可以缩写为 # -->
            <template #default>
                <input type="text" v-model="count">
            </template>
            <template #increase>
                <button @click="handler('+')">增加</button>
            </template>
        </kaifamiao-counter>
    </div>

    <script src="vue.global.js"></script>

    <script>

        const counter = {
            template:`<div class="counter">
                          <div>
                            <slot name="decrease"></slot>
                          </div>
                          <div>
                            <!-- 没有显式设置 name 的 slot默认名称是 default -->
                            <slot></slot>
                          </div>
                          <div>
                            <slot name="increase"></slot>
                          </div>
                      </div>`
        }

        const options = {
            data(){
                return { count: 1000 }
            },
            methods: {
                handler(operator){
                    switch( operator ) {
                        case '-': this.count-- ; break;
                        case '+': this.count++ ; break;
                    }
                }
            },
            components: {
                'kaifamiao-counter': counter
            }
        }
        const app = Vue.createApp(options);
        const root = app.mount('#root');
    </script>
    
</body>
</html>